<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.7.6/css/layui.css">
        <style type="text/css">
            .container{
                width: 420px;
                height: 290px;
                min-height: 290px;  
                max-height: 320px;  
                position: absolute;   
                top: 0;  
                left: 0;  
                bottom: 0;  
                right: 0;  
                margin: auto;  
                padding: 20px;  
                z-index: 130;  
                border-radius: 8px;  
                background-color: #fff;  
                box-shadow: 0 3px 18px rgba(100, 0, 0, .5); 
                font-size: 16px;
            }
            .close{
                background-color: white;
                border: none;
                font-size: 18px;
                margin-left: 410px;
                margin-top: -10px;
            }
 
            .layui-input{
                border-radius: 5px;
                width: 300px;
                height: 40px;
                font-size: 15px;
            }
            .layui-form-item{
                margin-left: -20px;
            }
            #logoid{ 
                margin-top: -16px;
                 padding-left:150px; 
                 padding-bottom: 15px;
            }
            .layui-btn{
                margin-left: -50px;
                border-radius: 5px;
                width: 350px;
                height: 40px;
                font-size: 15px;
            }
            .verity{
                width: 120px;
            }
            .font-set{
                font-size: 13px;
                text-decoration: none; 
                margin-left: 120px;
            }
            a:hover{
             text-decoration: underline; 
            }
 
        </style>
    </head>
    <body>
        <form class="layui-form" action="" method="post">
            <div class="container">
                <!-- <button class="close" title="关闭">X</button> -->
                <div class="layui-form-mid layui-word-aux">
                    This is Login Page! <span style="display: inline-block;margin-left: 80px;">Auth：admin=000000</span>
                </div>
              <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                  <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
              </div>
               <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text" name="title" placeholder="请输入验证码" autocomplete="off" class="layui-input verity">
                </div>
                <div class="captcha-img">
                    <img src="/get_captcha" onclick="brush_captcha(this)" id="captcha" style="cursor: pointer;">
                </div>
              </div>
                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">记住密码</label>
                    <div class="layui-input-block">
                      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
                    </div>
              </div> -->
 
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="demo1">登陆</button>         
                </div>
              </div>
               <a href="" class="font-set">忘记密码?</a>  <a href="" class="font-set">立即注册</a>
            </div>
        </form>
        <script type="text/javascript" src="https://www.layuicdn.com/layui-v2.7.6/layui.js"></script>
        <script>
            layui.use(['form', 'layedit', 'laydate', 'jquery'], function(){
              var form = layui.form
              ,layer = layui.layer
              ,layedit = layui.layedit
              ,laydate = layui.laydate;
              var $ = layui.$;
              
              //日期
             /* laydate.render({
                elem: '#date'
              });
              laydate.render({
                elem: '#date1'
              });
              
              //创建一个编辑器
              var editIndex = layedit.build('LAY_demo_editor');
             
              //自定义验证规则
              form.verify({
                title: function(value){
                  if(value.length < 5){
                    return '标题至少得5个字符啊';
                  }
                }
                ,pass: [
                  /^[\S]{6,12}$/
                  ,'密码必须6到12位，且不能出现空格'
                ]
                ,content: function(value){
                  layedit.sync(editIndex);
                }
              });
              
              //监听指定开关
              form.on('switch(switchTest)', function(data){
                layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                  offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
              });*/
              
              //监听提交
              form.on('submit(demo1)', function(data){

                /*layer.alert(JSON.stringify(data.field), {
                  title: '最终的提交信息'
                })*/
                
                /*layer.confirm("确认删除该行数据？",{btn:['确定','取消'],title:'删除确认'},function () {
                    var dId = data.dId;
                })*/
                $.ajax({
                    url:'/login',
                    type:'post',
                    // contentType:'application/json;charset=UTF-8',
                    // data:JSON.stringify(data.field),
                    data:{"username":data.field.username,"password":data.field.password},
                    dataType:'json',
                    success:function (resp) {
                      if (resp.code == 1) {
                        layer.msg(resp.msg, {icon: 1}, function(){
                          window.location.href="/";
                        });
                      } else {
                        layer.msg(resp.msg, {icon: 5});
                      }
                    }
                });

                return false;
              });
             
              //表单初始赋值
             /* form.val('example', {
                "username": "贤心" // "name": "value"
                ,"password": "123456"
                ,"interest": 1
                ,"like[write]": true //复选框选中状态
                ,"close": true //开关状态
                ,"sex": "女"
                ,"desc": "我爱 layui"
              })*/
              
              
            });
            // 刷新验证码
            function brush_captcha(obj) {
               console.log(obj)
               obj.src = "/get_captcha?" + Math.random();
            }
            </script>
    </body>
</html>